<template>
  <div>
    <!-- <div class="float-r" @click="add">
      <iconpark-icon name="add"></iconpark-icon>
    </div> -->

    <a-modal
      v-model:visible="modelVisible"
      title="修改内容"
      ok-text="确认"
      cancel-text="取消"
      @ok="modelConfirm"
    >
      <a-input placeholder="菜单标题组" v-model:value="updateData.menuItemGroupTitle">
        <template #prefix>
          <iconpark-icon name="title"></iconpark-icon>
        </template>
        <template #suffix>
          <a-tooltip title="菜单标题组">
            <iconpark-icon name="sigh"></iconpark-icon>
          </a-tooltip>
        </template>
      </a-input>
      <a-input
        placeholder="图标名称"
        v-model:value="updateData.menuItemGroupIcon"
        class="mt-1"
      >
        <template #prefix>
          <iconpark-icon :name="updateData.menuItemGroupIcon"></iconpark-icon>
        </template>
      </a-input>
      <a-select style="width: 100%" class="mt-1" v-model:value="updateData.subMenuTitle">
        <a-select-option
          v-for="(i, index) in submenuData"
          :key="index"
          :value="i.menuitem"
          @click="selectChange(i.menuitem, i.menuTitle)"
        >
          {{ i.menuTitle }}
        </a-select-option>
        <template #suffixIcon>
          <iconpark-icon name="sigh"></iconpark-icon>
        </template>
      </a-select>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, ref } from "vue";
import { message } from "ant-design-vue";

export default defineComponent({
  setup(props) {
    const { proxy } = getCurrentInstance();
    const modelVisible = ref(false);
    const updateData = ref({
      menuItemGroupTitle: "",
      menuItemGroupIcon: "",
      subMenuId: "",
      subMenuTitle: "",
    });
    const submenuData = ref([]);
    const isAdd = ref(false);

    onMounted(() => {
      proxy.$api.get("menuitem/submenu").then((res) => {
        console.log(res);
        if (res.error === 0) {
          submenuData.value = res.message;
        } else message.error(res.message);
      });
    });

    function onDelete(id) {
      proxy.$api.get("menuitemGroup/delete?id=" + id).then((res) => {
        console.log(res);
        if (res.error === 0) {
          modelVisible.value = false;
          message.success(res.message);
        } else message.error(res.message);
      });
    }
    function onupdate(object) {
      updateData.value = object;
      modelVisible.value = true;
      isAdd.value = false;
    }
    const modelConfirm = () => {
      if (isAdd.value) {
        proxy.$api.post("menuitemGroup/add", updateData.value).then((res) => {
          if (res.error === 0) {
            modelVisible.value = false;
            message.success(res.message);
          } else message.error(res.message);
        });
      } else {
        proxy.$api.post("menuitemGroup/update", updateData.value).then((res) => {
          if (res.error === 0) {
            modelVisible.value = false;
            message.success(res.message);
            proxy.$emit("upSuccess", updateData.value.subMenuId);
          } else message.error(res.message);
        });
      }
    };
    const add = () => {
      modelVisible.value = true;
      isAdd.value = true;
      updateData.value = {
        menuItemGroupTitle: "",
        menuItemGroupIcon: "",
        subMenuId: "",
        subMenuTitle: "",
      };
    };

    function selectChange(submenuId, subMenuTitle) {
      console.log(submenuId, subMenuTitle);
      updateData.value.subMenuId = submenuId;
      updateData.value.subMenuTitle = subMenuTitle;
    }
    return {
      modelVisible,
      updateData,
      submenuData,
      onDelete,
      onupdate,
      modelConfirm,
      add,
      selectChange,
    };
  },
});
</script>

<style scoped></style>
